﻿@{
    ViewBag.Title = "图表示例";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.ListContent.cshtml";
}

@section PageTitle
{
    <h5>图表示例</h5>
}

@section PageTools
{
    <a>测试数据共:{{testDataCount}}条</a>
    <a href="javascript:void(0)" class="btn btn-primary btn-xs" v-if="testDataCount<1" v-on:click="insertTestData()">插入测试数据</a>
}

<div>
    数据点：
    <template v-for="(point,index) in points">
        <input type="checkbox" name="point" v-model="selectPoints" v-bind:value="point.id"/>{{point.name}}
    </template>
    <input type="datetime-local" v-model="beginTime" />-
    <input type="datetime-local" v-model="endTime"/>
    <button type="button" v-on:click="showChart()">显示一个月图表</button>
</div>
<div>
    <div id="history-chart" style="width: 90%; height: 500px"></div>
</div>
@section Foot
{
    <script src="/api/AbpServiceProxies?name=app%2FhistoryData"></script>
    <script src="~/Content/echarts/echarts.common.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#vue-root',
            data: {
                testDataCount: 0,
                points: [],
                selectPoints: [],
                itemBuffers: [],
                beginTime: '2017-06-13T00:00:00',
                endTime: '2017-07-13T00:00:00'
            },
            methods: {
                loadTestCount: function() {
                    var that = this;
                    abp.services.app.historyData.testDataCount({}).done(function(count) {
                        that.testDataCount = count;
                        if (count > 0)
                            abp.notify.info('有测试数据!');
                    });
                },
                insertTestData: function() {
                    var that = this;
                    abp.services.app.historyData.insertTestData({}).done(function() {
                        abp.notify.success('测试数据插入成功!');
                        that.loadTestCount();
                    });
                },
                loadPoints: function() {
                    var that = this;
                    abp.services.app.historyData.getPoints({}).done(function(points) {
                        for (var i = 0; i < points.length; i++) {
                            var point = points[i];
                            that.points.push(point);
                        }
                    });
                },

                showChart: function() {
                    //加载数据
                    var that = this;
                    if (that.selectPoints.length < 1) {
                        abp.notify.info('请选择要显示的数据点!');
                        return;
                    }

                    var begin = moment(that.$data.beginTime).valueOf();
                    var end = moment(that.$data.endTime).valueOf();
                    abp.services.app.historyData.getHistory(that.$data.selectPoints, begin, end, {}).done(function(his) {
                        that.drawChart(his);
                    });
                },
                drawChart: function(hisData) {
                    var legendData = [],seriesData = [], yAxis=[];
                    for (var i = 0; i < this.points.length; i++) {
                        var point = this.points[i];
                        for (var j = 0; j < hisData.itemBuffers.length; j++) {
                            var buffer = hisData.itemBuffers[j];
                            if (buffer.pointId === point.id) {
                                legendData.push(point.name);
                                yAxis.push({
                                    name: point.name + ' (' + point.unit + ')',
                                    type: 'value'
                                });
                                var sery = {
                                    name: point.name,
                                    type: 'line',
                                    showSymbol: false,
                                    yAxisIndex: yAxis.length-1
                                };
                                sery.data = buffer.data;
                                seriesData.push(sery);
                                
                                break;
                            }
                        }
                    }
                    var startValue = moment(hisData.end).subtract(1, 'days').valueOf();
                    var option = {
                        title: {
                            text: '历史数据',
                            left: 0
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross'
                            }
                        },
                        legend: {
                            data: legendData
                        },
                        dataZoom: [{
                            startValue: startValue
                        }, {
                            type: 'inside'
                        }],
                        xAxis: {
                            type: 'time',
                            splitLine: {
                                show: false
                            }
                        },
                        yAxis: yAxis,
                        series: seriesData
                    };
                    this.$nextTick(function() {
                        var historyChart = echarts.init(document.getElementById('history-chart'));
                        historyChart.setOption(option);
                    });
                }
            },
            mounted: function() {
                this.loadTestCount();
                this.loadPoints();
            }
        })
    </script>
}